<template>
  <div class="design">
    <div class="navBar">
      <a href="#"
        ><img
          src="http://10.31.169.37:3000/images/mypage/测一测.png"
          alt=""
        /><span>测一测</span></a
      >
      <a href="#"
        ><img src="http://10.31.169.37:3000/images/mypage/形状 24.png" alt=""
      /></a>
    </div>
    <div class="bodyBox">
      <div class="userInfo">
        <div class="userInfo-l">
          <img
            src="http://10.31.169.37:3000/images/mypage/矢量智能对象.png"
            alt=""
          />
        </div>
        <div class="userInfo-r">
          <div class="userName weight" @click="fn2">{{ username }}</div>
          <div class="details">
            <div>
              <p class="weight">{{ followed }}</p>
              <p class="gray">关注</p>
            </div>
            <div>
              <p class="weight">{{ fans }}</p>
              <p class="gray">粉丝</p>
            </div>
          </div>
        </div>
      </div>
      <div class="func">
        <router-link to="/mypage/change" class="router-style">
          <div class="funcLi">
            <p>
              <img
                src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                alt=""
                class="smImg"
              />
              肤质变化
            </p>
            <img
              src="http://10.31.169.37:3000/images/mypage/肤质变化.png"
              alt=""
              class="bigImg"
            />
          </div>
        </router-link>
        <router-link to="/mypage/image" class="router-style">
          <div class="funcLi">
            <p>
              <img
                src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
                alt=""
                class="smImg"
              />测肤图像
            </p>
            <img
              src="http://10.31.169.37:3000/images/mypage/肤质图像.png"
              alt=""
              class="bigImg"
            />
          </div>
        </router-link>
        <div class="funcLi">
          <p>
            <img
              src="http://10.31.169.37:3000/images/mypage/综合圆角矩形 3.png"
              alt=""
              class="smImg"
            />测一测历史
          </p>
          <img
            src="http://10.31.169.37:3000/images/mypage/测一测历史.png"
            alt=""
            class="bigImg"
          />
        </div>
      </div>
      <div class="content">
        <van-cell is-link @click="fn"
          ><img
            src="http://10.31.169.37:3000/images/mypage/我用过的产品.png"
            alt=""
          />
          <span>我用过的产品</span>
        </van-cell>
        <div class="hiddenBox" v-if="isShow">
          <img src="http://10.31.169.37:3000/images/mypage/banner.png" alt="" />
        </div>
        <van-cell is-link
          ><img
            src="http://10.31.169.37:3000/images/mypage/我收藏的产品.png"
            alt=""
          />
          <span>我收藏的产品</span>
        </van-cell>
        <van-cell is-link
          ><img
            src="http://10.31.169.37:3000/images/mypage/我关注的品牌.png"
            alt=""
          />
          <span>我关注的品牌</span>
        </van-cell>
        <van-cell is-link
          ><img
            src="http://10.31.169.37:3000/images/mypage/发布帖子.png"
            alt=""
          />
          <span>我发布的帖子</span>
        </van-cell>
        <van-cell is-link
          ><img
            src="http://10.31.169.37:3000/images/mypage/收藏的文章.png"
            alt=""
          />
          <span>我收藏的文章</span>
        </van-cell>
        <van-cell is-link
          ><img
            src="http://10.31.169.37:3000/images/mypage/收藏的帖子.png"
            alt=""
          />
          <span>我收藏的帖子</span>
        </van-cell>
        <van-cell is-link
          ><img
            src="http://10.31.169.37:3000/images/mypage/订单管理.png"
            alt=""
          />
          <span>我的订单管理</span>
        </van-cell>
      </div>
    </div>
    <div id="nav">
      <Tabbar />
    </div>
  </div>
</template>
<script>
import Tabbar from "@/components/Tabbar.vue";
import Vue from "vue";
import { Cell, CellGroup } from "vant";

Vue.use(Cell);
Vue.use(CellGroup);
export default {
  components: {
    Tabbar,
  },
  data() {
    return {
      isShow: false,
      username: localStorage.getItem("username")
        ? localStorage.getItem("username")
        : "现在登录",
      followed: localStorage.getItem("followed")
        ? localStorage.getItem("followed")
        : "0",
      fans: localStorage.getItem("fans") ? localStorage.getItem("fans") : "0",
    };
  },
  methods: {
    fn() {
      this.isShow = !this.isShow;
    },
    fn2() {
      if (this.username === "现在登录") {
        window.location.href = "http://localhost:8080/#/login";
      }
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.design {
  height: 100%;
  text-align: center;
}
.navBar {
  font-family: "幼圆";
  height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dedede;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  a {
    display: block;
    text-decoration: none;
    font-size: 16px;
    color: #000;
    padding: 0 15px;
    span {
      padding: 0 10px;
      vertical-align: middle;
    }
    img {
      width: 20px;
      height: 20px;
      vertical-align: middle;
    }
  }
}
.userInfo {
  padding: 15px 0;
  display: flex;
  align-items: center;
  font-size: 14px;
  .userInfo-l {
    width: 75px;
    height: 75px;
    img {
      width: 100%;
      height: 100%;
      font-size: 0;
    }
  }
  .userInfo-r {
    padding: 0 30px;
    width: 200px;
    .userName {
      padding: 8px 0;
      font-size: 20px;
    }
    .details {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
    }
  }
}
.weight {
  font-weight: 900;
  color: #000;
}
.gray {
  color: rgb(193, 193, 193);
}
.func {
  font-family: "幼圆";
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px 0;
  font-size: 14px;
  .funcLi {
    p {
      padding-right: 30px;
      .smImg {
        height: 16px;
        vertical-align: middle;
        padding-right: 5px;
      }
    }

    .bigImg {
      width: 45px;
      height: 45px;
    }
  }
}
.content {
  .van-cell {
    text-align: left;
    img {
      width: 20px;
      height: 20px;
      vertical-align: middle;
    }
    span {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      margin-left: 15px;
    }
  }
}
.van-cell {
  height: 50px;
  line-height: 50px;
  align-items: center;
}
.hiddenBox {
  height: 80px;
  overflow: hidden;
  img {
    width: 100%;
  }
}
.router-style {
  color: #000;
}
.bodyBox {
  position: fixed;
  top: 46px;
  bottom: 50px;
  width: 100%;
  height: calc(100% - 96px);
  overflow: auto;
  padding: 0 15px;
}
// ------------------
#nav {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
}
</style>
